<template>
  <el-dialog
  center
    :visible.sync="visible"
    :title="$t('updateUserImg')"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :append-to-body="true" width="230px">
    <el-form  >
		<el-upload
		  class="avatar-uploader"
		  :action="url"
		  :headers="token"
		  :show-file-list="false"
		  :on-success="successHandle"
		  :before-upload="beforeUploadHandle">
		  <img v-if="imgUrl" :src="imgUrl" class="avatar">
		  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
		</el-upload>
    </el-form>
	
	<div slot="footer" class="dialog-footer">
	  <el-button @click="visible = false">取 消</el-button>
	  <el-button type="primary" @click="doModifyUserImg()">确 定</el-button>
	</div>
  </el-dialog>
</template>

<script>
import debounce from 'lodash/debounce'
import { clearLoginInfo } from '@/utils'
import { setMd5 } from '@/utils'
import Cookies from 'js-cookie'
export default {
  data () {
    return {
      visible: false,
	  url: window.SITE_CONFIG['apiURL']+'/common/upload/uploadFileToLocal',
	  token: {
		  token: ''
	  },
	  imgUrl: ''
    }
  },
  computed: {
   
  },
  methods: {
    init () {
      this.visible = true
      this.$nextTick(() => {
		this.imgUrl =Cookies.get('userImg')
		this.token.token = Cookies.get('token')
		
		const type = 'common';
		const time = new Date().valueOf();
		const thisurl = '/common/upload/uploadFileToLocal';
		const suger = 'FastBoot.RickSun.Sugar';
		const jg = '-';
		const sign = setMd5(type + jg + thisurl + jg + time + jg + suger);
		const passToken = type + jg + time + jg + sign;
		
		this.token.passToken = passToken;
      })
    }
	
	
	
    // 上传之前
    ,beforeUploadHandle (file) {
      if (file.type !== 'image/jpg' && file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/gif') {
        this.$message.error(this.$t('upload.tip', { 'format': 'jpg、png、gif' }))
        return false
      }
     
    },
	// 上传成功
	successHandle (res, file, fileList) {
	  if (res.code !== 200) {
	    return this.$message.error(res.msg)
	  }
	  this.imgUrl = res.data[0].fileUrl + "?isDownLoad=false"
	}
	,doModifyUserImg(){
		var params = {
			img: this.imgUrl
		}
		this.$http['post']('/pc/systemUser/modifyImg', params).then(({ data: res }) => {
		  if (res.code !== 200) {
		    return this.$message.error(res.msg)
		  }
		  this.$message({
		    message: this.$t('prompt.success'),
		    type: 'success',
		    duration: 500,
		    onClose: () => {
			  //将缓存更新
			  var cu = JSON.parse(localStorage.getItem('current_user'));
			  cu.img = this.imgUrl;
			   localStorage.setItem('current_user', JSON.stringify(cu));
			   Cookies.set('userImg', cu.img)
			   this.$emit("doModifyUserImg", cu.img);
		      this.visible = false
			  this.imgUrl = ''
			  this.token = {}
		      this.$emit('refreshDataList')
			  this.$emit('userImg',this.imgUrl)
		    }
		  })
		}).catch(() => {})
	}
	
   
  }
}
</script>

<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
